<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DarkModeContainer from '@/components/common/dark-mode-container.vue';
import { useThemeStore } from '@/store/modules/theme';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { ElMessage } from 'element-plus';

defineOptions({ name: 'ClientFooter' });

const themeStore = useThemeStore();
const currentYear = new Date().getFullYear();

interface Quote {
  text: string;
  author: string;
}

const quotes: Quote[] = [ /* 原有数据保持不变 */ ];

const currentQuote = ref<Quote>(quotes[0]);
const showAuthor = ref(false);

// 修改1: 增加防抖处理
let hoverTimer: NodeJS.Timeout;
const handleHover = (state: boolean) => {
  clearTimeout(hoverTimer);
  hoverTimer = setTimeout(() => {
    showAuthor.value = state;
  }, 100); // 添加100ms延迟防止快速移入移出闪烁
};

function getRandomQuote() { /* 原有逻辑保持不变 */ }

function copyQuote() { /* 原有逻辑保持不变 */ }

onMounted(() => {
  getRandomQuote();
});
</script>

<template>
  <DarkModeContainer class="h-full flex-center">
    <div 
      class="relative flex-center w-full py-2 cursor-pointer group"
      @click="copyQuote"
      @mouseenter="handleHover(true)"
      @mouseleave="handleHover(false)"
    >
      <!-- 修改2: 优化文本容器宽度 -->
      <div class="max-w-[80vw] overflow-hidden">
        <p 
          class="text-14px text-center transition-all duration-300 whitespace-nowrap overflow-hidden text-ellipsis"
          :class="themeStore.footer.fixed ? 'dark:text-white' : 'text-[#6a6a6a] dark:text-white'"
        >
          {{ currentQuote.text }}
        </p>
      </div>

      <!-- 修改3: 重构悬浮层定位 -->
      <div 
        class="author-container absolute left-1/2 -translate-x-1/2 bottom-full mb-2 flex items-center transition-all duration-300 bg-opacity-90 backdrop-blur-sm"
        :class="{
          'opacity-100 translate-y-0': showAuthor,
          'opacity-0 translate-y-2': !showAuthor
        }"
      >
        <span class="text-12px text-gray-500 dark:text-gray-300 whitespace-nowrap">
          —— {{ currentQuote.author }}
        </span>
        <div 
          class="p-1 ml-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
          @click.stop="getRandomQuote"
        >
          <SvgIcon icon="mdi:refresh" class="text-16px text-gray-500 dark:text-gray-300" />
        </div>
      </div>

      <!-- 修改4: 优化提示文本定位 -->
      <div 
        class="absolute left-1/2 -translate-x-1/2 top-full mt-4 transition-all duration-300"
        :class="{
          'opacity-100': showAuthor,
          'opacity-0': !showAuthor
        }"
      >
        <span class="text-10px text-gray-400 dark:text-gray-500">点击复制</span>
      </div>
    </div>
  </DarkModeContainer>
</template>

<style scoped>
/* 修改5: 优化层叠顺序和视觉效果 */
.author-container {
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.92);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  min-width: max-content;
}

.dark .author-container {
  background-color: rgba(30, 30, 30, 0.92);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* 修改6: 添加动画过渡 */
.author-container,
.footer-container {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 修改7: 防止文本容器宽度溢出 */
@media (max-width: 640px) {
  .max-w-$$80vw$$ {
    max-width: 90vw;
  }
}
</style>